<script setup>
import { ref, watch } from 'vue'
import { getProjectByIdService } from '@/api/project.js'

const props = defineProps({
  projectId: {
    type: Number,
    required: true
  }
})

// 服务项目状态与el-tag类型映射
const projectStatusTagTypeMap = {
  启用: 'success',
  禁用: 'danger'
}
const getProjectStatusTagType = (status) => {
  return projectStatusTagTypeMap[status] || 'info'
}

// 获取服务项目信息
const projectInfo = ref({})
const getProjectById = async (id) => {
  const res = await getProjectByIdService(id)
  projectInfo.value = res.data.data
}

// 监听projectId的变化，当projectId变化时重新获取服务项目信息
watch(
  () => props.projectId,
  (newId) => {
    if (newId) {
      getProjectById(newId)
    }
  },
  { immediate: true }
)
</script>

<template>
  <el-form :model="projectInfo" label-position="left">
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="服务项目ID">
          <el-tag type="info">{{ projectInfo.id }}</el-tag>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="服务项目名称">
          <el-tag type="info">{{ projectInfo.name }}</el-tag>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="服务项目类型名称">
          <el-tag type="info">{{ projectInfo.projectTypeName }}</el-tag>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="服务项目价格">
          <el-tag type="info">{{ (projectInfo.price / 100).toFixed(2) }}元</el-tag>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="服务项目描述">
          <el-tooltip :content="projectInfo.description" placement="top">
            <el-tag type="info" class="truncate-text">
              <div>{{ projectInfo.description }}</div>
            </el-tag>
          </el-tooltip>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="服务项目状态">
          <el-tag :type="getProjectStatusTagType(projectInfo.status)">{{
            projectInfo.status
          }}</el-tag>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="创建时间">
          <el-tag type="info">{{ projectInfo.createTime }}</el-tag>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="更新时间">
          <el-tag type="info">{{ projectInfo.updateTime }}</el-tag>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<style lang="scss" scoped>
.truncate-text {
  display: -webkit-box;
  overflow: hidden;
  div {
    line-height: 22px;
  }
}
</style>
